
<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input type="text" placeholder="请输入商圈、小区或经纪人姓名" v-model="searchKeyword" />
    </view>
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-item" @click="toggleFilter('area')">
        <text>{{ areaFilter === ''? '区域' : areaFilter }}</text>
<!--        <image src="../../static/arrow-down.png" v-if="areaFilter === ''"></image>-->
<!--        <image src="../../static/arrow-up.png" v-else></image>-->
      </view>
      <view class="filter-item" @click="toggleFilter('year')">
        <text>{{ yearFilter === ''? '年限不限' : yearFilter }}</text>
<!--        <image src="../../static/arrow-down.png" v-if="yearFilter === ''"></image>-->
<!--        <image src="../../static/arrow-up.png" v-else></image>-->
      </view>
      <view class="filter-item" @click="toggleFilter('sort')">
        <text>{{ sortFilter === ''? '默认排序' : sortFilter }}</text>
<!--        <image src="../../static/arrow-down.png" v-if="sortFilter === ''"></image>-->
<!--        <image src="../../static/arrow-up.png" v-else></image>-->
      </view>
    </view>
    <!-- 标签栏 -->
    <view class="tag-bar">
      <view class="tag-item" @click="selectTag('doubleFirstClass')">双一流高校</view>
      <view class="tag-item" @click="selectTag('activeViewing')">带看活跃</view>
      <view class="tag-item" @click="selectTag('propertyExpert')">房产专家</view>
    </view>
    <!-- 经纪人列表 -->
    <view class="agent-list">
      <view class="agent-item" v-for="(agent, index) in agents" :key="index" @click="goToAgentDetail(agent)">
        <view class="agent-avatar">
          <image :src="agent.avatar"></image>
        </view>
        <view class="agent-info">
          <view class="agent-name">{{ agent.clerkName }}</view>
          <view class="agent-name">{{ agent.mobile }}</view>
          <view class="agent-store">{{ agent.storeName }}</view>
          <view class="agent-tags">
<!--            <text v-if="agent.recommendTop" class="tag">{{ agent.recommendTop }}</text>-->
            <text v-if="agent.serviceCount" class="tag">{{ agent.serviceCount }}</text>
          </view>
          <view class="agent-stats">
            <view class="stat-item">
              <text>{{ agent.workingYear }}年</text>
              <text>服务年限</text>
            </view>

            <view class="stat-item">
              <text>{{ agent.customerScore }}</text>
              <text>客户评分</text>
            </view>
<!--            <view class="stat-item">-->
<!--              <text>{{ agent.shellScore }}</text>-->
<!--              <text>贝壳分</text>-->
<!--            </view>-->
          </view>
          <view class="agent-desc" v-if="agent.description">
            <text>{{ agent.description.slice(0, 50) }}{{ agent.description.length > 50? '...更多' : '' }}</text>
          </view>
        </view>
        <view class="chat-icon" @click="startChat(agent)">
            <image src="/static/message.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getClerkListAll } from '@/api/store';

export default {
  data() {
    return {
      searchKeyword: '',
      areaFilter: '',
      yearFilter: '',
      sortFilter: '',
      selectedTag: '',
      params: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
        mobile:''
      },
      agents: [
        {
          name: '赵灿',
          avatar: 'https://example.com/avatar1.jpg', // 替换为实际头像链接
          store: '德佑·德佑山水间南门店',
          recommendTop: '客户推荐前10%',
          certification: 'B1认证经纪人',
          serviceYears: 6,
          customerScore: 4.9,
          shellScore: 472,
          description: ''
        },
        {
          name: '周路先',
          avatar: 'https://example.com/avatar2.jpg', // 替换为实际头像链接
          store: '德佑·德佑惠丰和园店',
          recommendTop: '客户推荐前10%',
          certification: '',
          serviceYears: 6,
          customerScore: 4.9,
          shellScore: 468,
          description: '理性分析+目标明确  | 小周从事房地产六年，期间经历了大大小小七十多单，拥有...'
        },
        {
          name: '杜增亮',
          avatar: 'https://example.com/avatar3.jpg', // 替换为实际头像链接
          store: '德佑·德佑洱海公园店',
          recommendTop: '',
          certification: '',
          serviceYears: 5,
          customerScore: 4.8,
          shellScore: 316,
          description: '理性分析+善解人意  | 专心做好业'
        }
      ]
    };
  },
  onLoad(){
    this.getClerkList();
  },
  methods: {
    getClerkList(){
      getClerkListAll(this.params).then(res => {
        console.log(res)

        if(res.data.code==200){
          this.agents = res.data.result

        }
      })
    },
    toggleFilter(type) {
      // 这里可以实现筛选条件的切换逻辑，比如弹出选择框等
      console.log(`切换 ${type} 筛选`);
    },
    selectTag(tag) {
      this.selectedTag = tag;
      // 这里可以实现根据标签筛选经纪人列表的逻辑
      console.log(`选择标签 ${tag}`);
    },
    goToAgentDetail(agent) {
      // 跳转到经纪人详情页
      uni.navigateTo({
        url: `/pages/house/agentDetail?id=${agent.id}` // 假设agent有id属性
      });
    },
    startChat(agent) {
      // 实现聊天功能的逻辑，比如打开聊天窗口
      console.log(`与 ${agent.name} 开始聊天`);
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #fff;
}
.search-bar {
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
}
.filter-bar {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}
.filter-item {
  display: flex;
  align-items: center;
}
.tag-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}
.tag-item {
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  padding: 5rpx 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}
.agent-list {
}
.agent-item {
  display: flex;
  align-items: flex-start;
  border-bottom: 1rpx solid #ccc;
  padding: 20rpx 0;
}
.agent-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}
.agent-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.agent-info {
  flex: 1;
}
.agent-name {
  font-size: 32rpx;
  font-weight: bold;
}
.agent-store {
  color: #666;
  margin-top: 5rpx;
}
.agent-tags.tag {
  background-color: #f0f0f0;
  border-radius: 5rpx;
  padding: 3rpx 8rpx;
  margin-right: 5rpx;
  margin-top: 5rpx;
}
.agent-stats {
  display: flex;
  margin-top: 10rpx;
}
.stat-item {
  margin-right: 20rpx;
}
.agent-desc {
  color: #666;
  margin-top: 10rpx;
}
.chat-icon {
  width: 60rpx;
  height: 60rpx;
}
.chat-icon image {
  width: 100%;
  height: 100%;
}
</style>



<!--<template>-->
<!--  <view class="page">-->
<!--    <view class="search-bar">-->
<!--      <input type="text" placeholder="请输入商圈、小区或经纪人姓名" />-->
<!--    </view>-->

<!--    <u-sticky offset-top="1">-->
<!--      <view class="sticky">-->
<!--        <filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown>-->
<!--      </view>-->
<!--    </u-sticky>-->

<!--    <view class="article">-->
<!--      <view class="article-item" v-for="(v, k) in list" :key="k">-->
<!--        <view class="article-item-image">-->
<!--          <image :src="v.image"></image>-->
<!--        </view>-->
<!--        <view class="article-item-tilte">-->
<!--          <text>{{v.title}}</text>-->
<!--          <text>{{v.author}} {{v.time}} {{v.comment}}评</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--import searchData2 from '@/common/utils/searchData.js';//筛选菜单数据-->
<!--import filterDropdown from '@/components/zy/filterDropdown.vue';-->
<!--export default {-->
<!--  components: {-->
<!--    filterDropdown-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      filterData:[],-->
<!--      swiperConfig: {-->
<!--        autoplay: true,-->
<!--        interval: 5000,-->
<!--        duration: 500-->
<!--      },-->
<!--      current: 0, // 轮播图当前下标-->
<!--      // 示例图片尺寸为 4:3-->
<!--      list: [-->
<!--        {-->
<!--          title: '无芯片不“AI”——AI算力芯片研究报告',-->
<!--          image: '/static/7.jpg',-->
<!--          author: 'BBQ国际新闻',-->
<!--          comment: 127,-->
<!--          time: '10分钟前',-->
<!--        },-->
<!--        {-->
<!--          title: '人工智能时代到来，人们又该如何规划未来的工作方向，大失业潮会到来吗？',-->
<!--          image: '/static/3.jpg',-->
<!--          author: 'BBQ国际新闻',-->
<!--          comment: 103,-->
<!--          time: '1小时前'-->
<!--        },-->
<!--        {-->
<!--          title: '未来的人们是不是都会拥有一个家庭机器管家',-->
<!--          image: '/static/1.jpg',-->
<!--          author: 'BBQ国际新闻',-->
<!--          comment: 110,-->
<!--          time: '2天前'-->
<!--        },-->
<!--        {-->
<!--          title: '近期频频发生交通堵塞的自动配送机器,无人配送技术多久才能成熟使用？',-->
<!--          image: '/static/2.jpg',-->
<!--          author: 'BBQ国际新闻',-->
<!--          comment: 1450,-->
<!--          time: '3天前'-->
<!--        },-->
<!--        {-->
<!--          title: '连上多个热搜!火爆全网的ChatGPT到底是个啥?',-->
<!--          image: '/static/6.jpg',-->
<!--          comment: 320,-->
<!--          author: 'BBQ国际新闻',-->
<!--          time: '4天前'-->
<!--        }-->
<!--      ]-->
<!--    }-->
<!--  },-->
<!--  onLoad() {-->
<!--    this.filterData=searchData2;-->
<!--  },-->
<!--  methods: {-->
<!--    swiperChange(e){-->
<!--      this.current = e.detail.current;-->
<!--    },-->
<!--    confirm(e) {-->
<!--      let type = e.value[1][0]-->
<!--      let villageName = e.value[0][0]-->
<!--      let price = e.value[2][0]-->
<!--      let combo = e.value[3]-->
<!--      let houseNum = combo[0]-->
<!--      let decoration = combo[1]-->
<!--      let feature = combo[2]-->
<!--      this.searchData = {}-->
<!--      if(type){-->
<!--        this.searchData.type = type-->
<!--      }-->
<!--      if(villageName){-->
<!--        this.searchData.villageName = villageName-->
<!--      }-->
<!--      if(price){-->
<!--        this.searchData.price = price-->
<!--      }-->
<!--      if(houseNum && houseNum.length>0){-->
<!--        this.searchData.houseNum = houseNum.toString()-->
<!--      }-->
<!--      if(decoration && decoration.length>0){-->
<!--        this.searchData.decoration = decoration.toString()-->
<!--      }-->
<!--      if(feature && feature.length>0){-->
<!--        this.searchData.feature = feature.toString()-->
<!--      }-->
<!--      this.pageNum = 1-->
<!--      this.houseList = []-->
<!--      this.flowList = []-->
<!--      this.$refs.uWaterfall.clear();-->

<!--    },-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss">-->
<!--.page {-->
<!--  padding: 15rpx;-->


<!--  .article{-->
<!--    padding-top: 20rpx;-->

<!--    .article-item{-->
<!--      margin-bottom: 20rpx;-->
<!--      display: flex;-->
<!--      height: calc(200rpx * 0.75);-->
<!--      padding: 10rpx;-->
<!--      border-bottom: 1px solid #f5f5f5;-->

<!--      &:active{-->
<!--        background: #f0f0f0;-->
<!--      }-->

<!--      .article-item-image{-->
<!--        image{-->
<!--          width: 200rpx;-->
<!--          height: calc(200rpx * 0.75);-->
<!--        }-->
<!--      }-->

<!--      .article-item-tilte{-->
<!--        padding-left: 15rpx;-->
<!--        display: flex;-->
<!--        flex-direction: column;-->
<!--        justify-content: space-between;-->

<!--        text{-->
<!--          font-size: 12px;-->
<!--          color: #777;-->

<!--          &:nth-child(1){-->
<!--            padding: 5rpx 0;-->
<!--            font-size: 14px;-->
<!--            color: #000;-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--}-->

<!--.search-bar {-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.search-bar input {-->
<!--  width: 100%;-->
<!--  padding: 10px;-->
<!--  border: 1px solid #ccc;-->
<!--  border-radius: 5px;-->
<!--}-->
<!--</style>-->